<template>
	<view class="InsuranceBox">
		<view class="item">
			<view class="label">
				保险时间
			</view>
			<view class="value">
				<picker mode="date" :value="time1" @change="timeChange($event,'time1')">
					<view class="uni-input">{{time1}}</view>
				</picker>
				<view class="line"></view>
				<picker mode="date" :value="time2" @change="timeChange($event,'time2')">
					<view class="uni-input">{{time2}}</view>
				</picker>
			</view>
			<view class="item">
				<view class="label">
					险种
				</view>
				<view class="value">
					<view :class="activeLev == index?'lev active':'lev'" v-for="(item ,index) in levList" :key='index' @click="chooseLev(index,'list1')">
						{{item}}
					</view>
				</view>
			</view>
			<view class="add" @click="add">
				<text>
					确定
				</text>
			
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				time1:"",
				time2:"",
				activeLev:"",
				levList:['交强险','三者险','车损险','商业险'],
				checkbox:['交强险']
			}
		},
		// levList:['中国人保','中国太保','中国平安','中国大地','中华联合','安邦保险','都邦保险','华泰保险','天安保险',
		// '永安保险','浙商保险','紫金保险','民安保险','中银保险'],
		methods:{
			timeChange(e,key){
				this[key] = e.target.value
			},
			add(){
				let that = this
				let pages = getCurrentPages(); // 当前页面
				let prePage = pages[pages.length - 2]; // 前一个页面
				prePage.setData({   //把需要回传的值保存到上一个页面
				      time: [that.time1,that.time2],
					  Insurance:that.checkbox
				    });
				uni.navigateBack({
					delta: 1,
				});
			},
			chooseLev(index,lev){
				this.activeLev = index;
				this.checkbox = this.levList[index]
			}
		}
	}
</script>

<style lang="less">
	.item {
		margin-top: 30rpx;
		padding: 0 10rpx;

		.label {
			font-size: 30rpx;
		}

		.value {
			margin-top: 28rpx;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.line {
				width: 88rpx;
				height: 2rpx;
				float: left;
				background-color: #D9D9D9;
				margin: 0 18rpx;
				margin-top: 22rpx;
			}

			picker {
				width: 270rpx;
				height: 46rpx;
				float: left;
				background-color: #F7F7F7;
				line-height: 46rpx;
				text-align: center;
				font-size: 30rpx;
			}
			.uni-input{
				width: 270rpx;
				height: 46rpx;
			}
			.lev,.lev2 {
				width: 151rpx;
				height: 55rpx;
				background-color: #f7f7f7;
				color: #7F7F7F;
				font-size: 24rpx;
				text-align: center;
				line-height: 55rpx;
				float: left;
				margin: 0 10rpx;
				margin-top: 20rpx;
				border-radius: 8rpx;

				&.active {
					background-color: #E31705;
					color: #fff;
				}
			}
			.lev2{
				width: 325rpx;
				height: 55rpx;
				
			}
		}

	}
	.add {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 166rpx;
		padding: 30rpx;
		box-shadow: -1px -2px 7px 0px rgba(0, 0, 0, 0.1);
	
		text {
			display: block;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #E41805;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}
	
	}
</style>
